<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<title>xuluo</title>
	<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
	<style>
		*{margin: 0;padding: 0;font-family: 'microsoft yahei';list-style: none;}
		a{text-decoration: none;}
		.bnr{width: 1000px;height: 200px;margin: 200px auto;position: relative;}
		.bnr .hidden{height: 100%;width:100%;margin: 0 auto;overflow: hidden;position: relative;}
		.bnr .imgul{position: absolute;left: 0;top:0;}
		.bnr .imgul li{width: 1000px;height: 100%;float: left;line-height: 200px;text-align: center;color: #fff;}
		.bnr .cirul{position: absolute;bottom: 5px;left: 50%;margin-left: -40px;}
		.bnr .cirul li{width: 12px;height: 12px;background: #ddd;border-radius: 50%;float: left;margin: 0 2px;}
		.bnr .cirul li.curr{background: #4F90E8;}
		.bnr .btn{display: inline-block;font-size: 50px;font-family: 'STHeiti';position: absolute;top:50%;color: #280000;
		margin-top: -29px;}
		.bnr .pre{left:-40px;}
		.bnr .next{right: -40px;}
		 @media screen and (max-width: 640px){
			.bnr{width: 240px;margin: 100px auto 0 auto;}
			.bnr .imgul li{width: 240px;}
		} 
	</style>
</head>
<body>
	<div class="bnr">
		<div class="hidden">
			<ul class="imgul">
				<li style="background: #643c78;">第一个</li>
				<li style="background: #000028;">第二个</li>
				<li style="background: #8c78a0;">第三个</li>
				<li style="background: #8c7878;">第四个</li>
				<li style="background: #282864;">第五个</li>
			</ul>
		</div>
		<div class="cirul"></div>	
		<a href="javascript:;" class="pre btn"><</a><a href="javascript:;" class="next btn">></a>
	</div>
	<script src="js/base.js"></script>
	<script>
		carousel({
			ele:'.bnr',
			imgul:'.imgul',
			cir:'.cirul',
			pre:'.pre',
			next:'.next',
			curr:'curr',
			time:false
		});
	</script>
</body>
</html>
